import React, { useEffect, useState } from 'react';
import { Skeleton,Flex, Divider, Space, Input, Button, } from 'antd';
import { DotChartOutlined, DownOutlined, SearchOutlined } from '@ant-design/icons';
import Crop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';
import './index.css'
import Chuan from './chuan'
import Huabi from './huabi'
// 引入图片
import img from '../../assets/img/1.jpg'
import img2 from '../../assets/img/2.jpg'
import img3 from '../../assets/img/3.jpg'
import img4 from '../../assets/img/4.jpg'
import img5 from '../../assets/img/5.jpg'
import img6 from '../../assets/img/6.jpg'
import img7 from '../../assets/img/7.jpg'
import img8 from '../../assets/img/8.jpg'
import img9 from '../../assets/img/9.jpg'
import img10 from '../../assets/img/10.jpg'
import img11 from '../../assets/img/11.jpg'
import img12 from '../../assets/img/12.jpg'
import img13 from '../../assets/img/13.jpg'
import img14 from '../../assets/img/14.jpg'
import img15 from '../../assets/img/15.jpg'
import img16 from '../../assets/img/16.jpg'
import img17 from '../../assets/img/17.jpg'
import img18 from '../../assets/img/18.jpg'
import img19 from '../../assets/img/19.jpg'
import img20 from '../../assets/img/20.jpg'
import img21 from '../../assets/img/21.jpg'
import img22 from '../../assets/img/22.jpg'
import img23 from '../../assets/img/23.jpg'
import img24 from '../../assets/img/24.jpg'
import img25 from '../../assets/img/25.jpg'
import img26 from '../../assets/img/26.jpg'
import img27 from '../../assets/img/27.jpg'
import img28 from '../../assets/img/28.jpg'
import img29 from '../../assets/img/29.jpg'
import img30 from '../../assets/img/30.jpg'
import LazyImage from '../LazyImage/LazyImage';

const tabData = [
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/df5a696243b3af89c8fb5d756804d72c.svg',
      text: '添加'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/13f97bb37d5203ce8ec38ca2752dc72e.svg',
      text: '模版'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/5ce6d198cf438fd4c936c13735e0bff8.svg',
      text: '元素'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/4083d7349dc5f26ff65849935a7125fd.svg',
      text: '文字'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/385189e77857511173548af8a1281e6b.svg',
      text: '图片'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240424/953e7889f68cc1c841281345baa62654.svg',
      text: 'AI工具'
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/7efc79b06a9fcc1acb689991b4d1c0a8.svg',
      text: '团队'
    },
    {
      imgSrc: 'https://img2.baidu.com/it/u=3294951924,3410146803&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      text: '我的'
    }
  ];

type SizeType = 'default' | 'small' | 'large';

// 素材
const TabContent = ({ activeTab }: { activeTab: number }) => {

  const [block, setBlock] = useState(false);
  const [size, setSize] = useState<SizeType>('default');

  const handleDragStart = (event: React.DragEvent<HTMLDivElement>, src: string) => {
        event.dataTransfer.setData('text/plain', src);
    };

  // 获取数据
  const setImg = [
    img,
    img2,
    img3,
    img4,
    img5,
    img6,
    img7,
    img8,
    img9,
    img10,
    img11,
    img12,
    img13,
    img14,
    img15,
    img16,
    img17,
    img18,
    img19,
    img20,
    img21,
    img22,
    img23,
    img24,
    img25,
    img26,
    img27,
    img28,
    img29,
    img30,
  ]

  const tabData = [
    {
      text:(<div>
    <Skeleton.Input active size={size} block={block} />
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Image active />
        <Skeleton.Image active />
      </Space>
    </Flex>
    <Skeleton.Input active size={size} block={block} />
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Image active />
        <Skeleton.Image active />
        <Skeleton.Image active />
      </Space>
    </Flex>
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Image active />
        <Skeleton.Image active />
      </Space>
    </Flex>
    <Skeleton.Input active size={size} block={block} />
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
      </Space>
    </Flex>
    <Flex gap="middle" vertical>
      <Space style={{ margin:'10px 0px' }}>
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
        <Skeleton.Node active style={{ height:'50px',width:'100px' }} />
      </Space>
    </Flex>
    <Skeleton.Input active size={size} block={block} />
    </div>)
    },
    {
      text: (
        <div>
            {/* 搜索框 */}
            <Input size="large" placeholder="搜索模版" prefix={<SearchOutlined />} style={{width:'95%',margin:'10px 10px' }} />
            {/* 推荐模版/分类 */}
            <>
            <Button type="primary" style={{ marginLeft:'10px' }}>推荐模版</Button>
            <Button style={{ background:'#ccc',marginLeft:'10px' }}>分类<DownOutlined /></Button>
            </>
            {/* 瀑布流 */}
            <div id='pubuliu'>
            {/* 数据渲染 */}
            <div>
              {
              setImg.map((item, ind) => (
                <dl key={ind}>
                  <dt>
                    <LazyImage src={item} alt="" />
                  </dt>
                </dl>
              ))}
            </div>
            </div>
        </div>
      )
    },
    {
      text: (
        <div>
            {/* 搜索框 */}
            <Input size="large" placeholder="搜索模版" prefix={<SearchOutlined />} style={{width:'95%',height:'35px',margin:'10px 10px',position:"sticky" }} />
            {/* 数据 */}
            <div id='Buttonbox' style={{ display:'flex',flexWrap:'wrap',margin:'10px' }}>
                <Button style={{ backgroundColor: 'rgb(251, 240, 255)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702873971739.png" alt="" />
                  <span>形状</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(255, 240, 244)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702874015348.png" alt="" />
                  <span>线条</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(254, 246, 239)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702874088972.png" alt="" />
                  <span>容器</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(236, 252, 255)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1702874036761.png" alt="" />
                  <span>插画</span>
                </Button>
                <Button style={{ background:'#f2f7ff' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1705541440650.png" alt="" />
                  <span>边框</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(255, 242, 246)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1704263196988.png" alt="" />
                  <span>爱心</span>
                </Button>
                <Button style={{ backgroundColor: 'rgb(244, 242, 254)' }}>
                  <img src="https://st0.dancf.com/market-operations/market/side/1705368095348.png" alt="" />
                  <span>节日</span>
                </Button>
                <Button style={{ background:'#e8eaec' }}>
                  <DownOutlined />
                  <span>更多</span>
                </Button>
            </div>
            {/* 最近使用 */}
            <div>
              <p style={{ marginLeft:'10px' }}>最近使用</p>
              <div style={{ background:'#ccc',borderRadius:'10px',margin:'10px' }}></div>
            </div>
            {/* AI广告 */}
            <img src="https://gaoding-market-fat.dancf.com/market-operations/market/side/b16d0f41e5994e539e99f2a643d23a74/1720695335601.png" alt="" id='logo' />
            {/* 线/箭头 */}
            <div id='xian'>
              <h4><p>线·箭头</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png")}>
                  <img src="https://gd-ai-application.dancf.com/temp/51c70eeba71c9c099946835631127d5e.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/02652/55f892c0e06c47488962ef99075ef03a.png?auth_key=1727153094-e079a5b495d44f85800c6c5c27b456f6-9029724606533949508-2164e9dddbc6ed8fa537768d2977ac03" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-2c2c.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-a72e.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/ed46d2a736bf279e4ec15a3a6be3aa46.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/1ae071b3aacad983ecbe47830bcb0f00.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/5a39395bf6cf7cc93108cfb9ab50737e.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/cms/202406210500-3bfa.svg" alt="" />
                </div>
              </div>
            </div>
            {/* 基础装饰 */}
            <div id='BasicDecoration'>
              <h4><p>基础装饰</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210716-111927-1c9b.png")}>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210716-111927-1c9b.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/1fd26e199eed3e6fcf05c79c8678a1ae.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210716-111927-a431.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210716-111927-521c.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210506-094703-498b.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210716-111928-2dfc.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210716-111927-23a5.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210716-111928-b47c.png" alt="" />
                </div>
              </div>
            </div>
            {/* 小红书装饰 */}
            <div id='XiaohongshuDecoration'>
              <h4><p>小红书装饰</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://st0.dancf.com/02/material_uploader/202007030229-923d.png")}>
                  <img src="https://st0.dancf.com/02/material_uploader/202007030229-923d.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/95838/22f691cbdca949d292836c976e96fa32.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/748581e1adc9355460a2496a3a0c34e1.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/95838/208e715fdf24482c85586b8ee55cfed6.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/83459/ca9b21d29e0445898f5a6596b538ef38.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/95838/55ab7bcb621f403494fc0b743fd51614.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/0dfd0db7a1739f3f60d993fd085bea6d.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/d00ea5a02b7d8272c8e6b6faf5c122bc.png" alt="" />
                </div>
              </div>
            </div>
            {/* 公众号元素 */}
            <div id='Elementsofofficialaccount'>
              <h4><p>公众号元素</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://st0.dancf.com/02/material_uploader/202007030229-923d.png")}>
                  <img src="https://st0.dancf.com/02/material_uploader/202007030229-923d.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/157/design/20200528-171642-aeac.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/95838/22f691cbdca949d292836c976e96fa32.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/47449/ea5db256-0ed6-474c-9190-ecc6aa7d49a022658.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/83459/308566b32da547fd91c506878cabe82e.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/83459/98ed6235a3174567b80a4fc08e09c3a1.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/47449/ef011cd6-f6de-4572-9f64-46422005d03119168.png?auth_key=1727243574-89f2850678394d3c988aef81ef83933a-9029724606533949508-bdc141c1fa6c2ff043413008bf36e976" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/e16d776b2e4f5b1b663abacabc532bfc.png" alt="" />
                </div>
              </div>
            </div>
            {/* 龙元素 */}
            <div id='DragonElement'>
              <h4><p>龙元素</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://gd-ai-application.dancf.com/temp/d00ab6f82600dff1725dae04492ace45.png")}>
                  <img src="https://gd-ai-application.dancf.com/temp/d00ab6f82600dff1725dae04492ace45.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/51451/339c317ce1b0423db4ae73ab2d00f713.png?auth_key=1727324574-6681a19208f24707b322889cc67ddab3-9029724606533949508-0fd900ec1c1f56485299ef6b27573dff" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/b6dae2ce629b32066262aabab4fe611c.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/uxms/202401090209-d678.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/e5532579cd00fe7e9fecb051d44c1d08.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/27ffa1d73cd656c0aaf219f58937cc12.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/uxms/202401090211-b5b6.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/63719/a58ffc58e6dd48538fdd08119ee39008.png?auth_key=1727324574-6681a19208f24707b322889cc67ddab3-9029724606533949508-0fd900ec1c1f56485299ef6b27573dff" alt="" />
                </div>
              </div>
            </div>
            {/* 一键三连 */}
            <div id='Oneclicktripleconnection'>
              <h4><p>一键三连</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210925-200652-07a8.png")}>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210925-200652-07a8.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210925-195939-06d9.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20211001-004154-0c2e.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20211001-004141-f465.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20211001-004154-57d5.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/f038d8659315904a3b9f0731c126d7d7.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20211001-004141-ce8b.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20211001-004154-8645.png" alt="" />
                </div>
              </div>
            </div>
            {/* 人物插画 */}
            <div id='Characterillustration'>
              <h4><p>人物插画</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://gd-ai-application.dancf.com/temp/aa1d92cd97b9ce5af3dbd34106997eae.png")}>
                  <img src="https://gd-ai-application.dancf.com/temp/aa1d92cd97b9ce5af3dbd34106997eae.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210713-001643-1403.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210705-183123-ed2c.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210904-221040-eb87.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210704-225613-470d.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/ab3afe202be8426fc3b9d776cd06327e.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210722-100035-47ea.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/0/personal/my-tasks/20210720-165153-d564.png" alt="" />
                </div>
              </div>
            </div>
            {/* 3D元素 */}
            <div id='Delements'>
              <h4><p>3D元素</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://gd-ai-application.dancf.com/temp/ef54f20c12235eefb3790b5169a3db42.png")}>
                  <img src="https://gd-ai-application.dancf.com/temp/ef54f20c12235eefb3790b5169a3db42.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/688376a5a4be56b6466f35f4448d0af5.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/4e47403c7417f0b74502e52e708304b5.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/19c8781dbd871996c8d2e072fc48b9d8.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/b571412713b0e6f898dc68230a5c5440.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/6cade4fd84b349681e963b58486fa2b6.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/cms/mcm79j/mcm79j/80412/1b86a4ff-0cf0-49ef-9bde-85ecb00249e5401836.png?auth_key=1727324574-6681a19208f24707b322889cc67ddab3-9029724606533949508-0fd900ec1c1f56485299ef6b27573dff" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/10dbf91408aef7a80a3b4002ffd0dfab.png" alt="" />
                </div>
              </div>
            </div>
            {/* 水墨元素 */}
            <div id='Inkandwashelements'>
              <h4><p>水墨元素</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://st0.dancf.com/02/cms/202406240423-0d89.png")}>
                  <img src="https://st0.dancf.com/02/cms/202406240423-0d89.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/c295751d5b8f17b9d5aadf02366f2102.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/59440/cfa1e9ff500348fe9c3214b7a2c1b115.png?auth_key=1727324574-6681a19208f24707b322889cc67ddab3-9029724606533949508-0fd900ec1c1f56485299ef6b27573dff" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/cbd49eb3beaf981398eaceb623518613.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/9fca29ed65470bb85422918e4af35128.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/0cfa9f7c2b1c5ef7de6a011af2ca04b8.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-ai-application.dancf.com/temp/797039805df7f5015282c86a13d3f675.png" alt="" />
                </div>
                <div>
                  <img src="https://gd-filems.dancf.com/gaoding/gaoding/59440/9149d663bead430a9ea7a6d208ad83ae.png?auth_key=1727324574-6681a19208f24707b322889cc67ddab3-9029724606533949508-0fd900ec1c1f56485299ef6b27573dff" alt="" />
                </div>
              </div>
            </div>
            {/* 形状 */}
            <div id='shape'>
              <h4><p>形状</p><span>查看更多</span></h4>
              <div id='jiantou'>
                <div draggable onDragStart={(e) => handleDragStart(e, "https://st-gdx.dancf.com/gaodingx/157/design/20200528-171642-aeac.png")}>
                  <img src="https://st-gdx.dancf.com/gaodingx/157/design/20200528-171642-aeac.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-2c2c.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/157/design/20200528-171312-05fb.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/157/design/20200528-171428-18c9.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-a72e.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040254-b818.png" alt="" />
                </div>
                <div>
                  <img src="https://st-gdx.dancf.com/gaodingx/157/design/20200528-172443-88af.png" alt="" />
                </div>
                <div>
                  <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202108040253-5c81.png" alt="" />
                </div>
              </div>
            </div>
        </div>
      )
    },
    {
      text: (
        <div>
          {/* 搜索框 */}
          <Input size="large" placeholder="搜索模版" prefix={<SearchOutlined />} style={{width:'95%',height:'35px',margin:'10px 10px',position:"sticky" }} />
          <div>
          {/* 添加文字 */}
          <div id='AddText'>
            <h4>添加文字</h4>
            <div id='AddText-box'>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://cdn.dancf.com/fe-assets/20231010/icon/6e012a7f48052abdb3213e211df5a773.svg" alt="" />
                <p>标题</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://cdn.dancf.com/fe-assets/20231010/icon/e17e0b7ffd83504860bc6a55ff076377.svg" alt="" />
                <p>副标题</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://cdn.dancf.com/fe-assets/20231010/icon/4493fe6ba2683f3f2769dd25263687ea.svg" alt="" />
                <p>正文</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://cdn.dancf.com/fe-assets/20231010/icon/f3a43302f4580649356deacca3ae6f52.svg" alt="" />
                <p>变形文字</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://cdn.dancf.com/fe-assets/20231010/icon/c973ec5f7fb1b488aefde7a73c754911.svg" alt="" />
                <p>3D文字</p>
              </div>
            </div>
          </div>
          {/* 小红书笔记 */}
          <img src="https://gaoding-market-fat.dancf.com/market-operations/market/side/ff7fe82c6ae8448fbc4b83cfbc68c499/1720695313768.png" alt="" id='logo' />
          {/* 基础文字 */}
          <div id='BasicText'>
            <h4><p>基础文字</p><span>查看更多</span></h4>
            <div id='BasicText-box'>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain","<p>示例文本</p>")}>
                <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202012230744-d865.png" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202101121029-1707.png" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202012231108-c3f6.png" alt="" />
                <p>&emsp;</p>
              </div>
            </div>
          </div>
          {/* 晒图笔记 */}
          <div id='Photoexposurenotes'>
            <h4><p>晒图笔记</p><span>查看更多</span></h4>
            <div id='BasicText-box'>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://st0.dancf.com/02/sangpin/images/202012290505-affe.png" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202012091106-28c7.png" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://st0.dancf.com/02/gaodingx/0/cms/design/202009080357-a809.png" alt="" />
                <p>&emsp;</p>
              </div>
            </div>
          </div>
          {/* 台词字幕 */}
          <div id='Photoexposurenotes'>
            <h4><p>台词字幕</p><span>查看更多</span></h4>
            <div id='BasicText-box'>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://gd-filems.dancf.com/gaoding/gaoding/53357/4d09dc87-cc78-4086-93da-958519451b21105009.png?auth_key=1727330725-0c8de48109fe4f9481377675278b6112-9029724606533949508-0e5a98c5caaaca468660ada9e7942e15" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://gd-filems.dancf.com/gaoding/gaoding/53357/afa05d09-754b-431b-b521-2e569c6a1419341233.png?auth_key=1727330725-0c8de48109fe4f9481377675278b6112-9029724606533949508-0e5a98c5caaaca468660ada9e7942e15" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://st0.dancf.com/02/cms/202406171117-b141.png" alt="" />
                <p>&emsp;</p>
              </div>
            </div>
          </div>
          {/* 标题文字 */}
          <div id='Photoexposurenotes'>
            <h4><p>标题文字</p><span>查看更多</span></h4>
            <div id='BasicText-box'>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://st-gdx.dancf.com/gaodingx/0/uxms/design/20210825-151742-afac.png" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://gd-filems.dancf.com/gaoding/gaoding/47449/444fc6ec-77f1-4f49-9e48-73ae35b2f30219124.png?auth_key=1727330725-0c8de48109fe4f9481377675278b6112-9029724606533949508-0e5a98c5caaaca468660ada9e7942e15" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://gd-filems.dancf.com/gaoding/gaoding/47449/11faa8f4-b1b0-4734-ad4c-bc4c4ab8226a83869.png?auth_key=1727330725-0c8de48109fe4f9481377675278b6112-9029724606533949508-0e5a98c5caaaca468660ada9e7942e15" alt="" />
                <p>&emsp;</p>
              </div>
            </div>
          </div>
          {/* 文艺花字 */}
          <div id='Photoexposurenotes'>
            <h4><p>文艺花字</p><span>查看更多</span></h4>
            <div id='BasicText-box'>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://gd-filems.dancf.com/gaoding/gaoding/69953/ae760f95-d391-44a7-acc5-3ed513572066518359.png?auth_key=1727330725-0c8de48109fe4f9481377675278b6112-9029724606533949508-0e5a98c5caaaca468660ada9e7942e15" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://gd-filems.dancf.com/gaoding/gaoding/90882/5e3f2d36-52ef-4f00-94f3-31ac68ec9a03104864.png?auth_key=1727330725-0c8de48109fe4f9481377675278b6112-9029724606533949508-0e5a98c5caaaca468660ada9e7942e15" alt="" />
                <p>&emsp;</p>
              </div>
              <div draggable onDragStart={(e) => e.dataTransfer.setData("text/plain", "<p>示例文本</p>")}>
                <img src="https://gd-filems.dancf.com/gaoding/gaoding/62764/05e228db-18ae-4968-8715-8c7821844e3c85901.png?auth_key=1727330725-0c8de48109fe4f9481377675278b6112-9029724606533949508-0e5a98c5caaaca468660ada9e7942e15" alt="" />
                <p>&emsp;</p>
              </div>
            </div>
          </div>
          </div>
        </div>
      )
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/385189e77857511173548af8a1281e6b.svg',
      text: <Chuan/>
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240424/953e7889f68cc1c841281345baa62654.svg',
      text: <Huabi/>
    },
    {
      imgSrc: 'https://cdn.dancf.com/fe-assets/20240110/7efc79b06a9fcc1acb689991b4d1c0a8.svg',
      text: '团队'
    },
    {
      imgSrc: 'https://img2.baidu.com/it/u=3294951924,3410146803&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
      text: '我的'
    }
  ];

  return (
    <div id="zuo-sucai">
      <div>{tabData[activeTab].text}</div>
    </div>
  );
};

// 整体一个左边盒子
const Sidebar = () => {
  const [activeTab, setActiveTab] = useState(0);

  const handleTabClick = (index: number) => {
    setActiveTab(index);
  };

  return (
    <div style={{width:'100%', display:'flex' }}>
      <div id="zuo-cebianlan">
        <ul>
          {tabData.map((tab, index) => (
            <li key={index} onClick={() => handleTabClick(index)}>
              <img src={tab.imgSrc} alt="" />
              <span>{tab.text}</span>
            </li>
          ))}
        </ul>
      </div>
      <div id="zuo-sucai">
        <TabContent activeTab={activeTab} />
      </div>
    </div>
  );
};

export default Sidebar;